<template>
  <view class="detail-container">
    <view class="question-card">
      <!-- 题目头部信息 -->
      <view class="question-header">
        <view class="question-type">{{ formatQuestionType(question.question_type) }}</view>
        <view class="question-meta">{{ formatSubject(question.subject) }} · {{ question.model }}</view>
      </view>
      
      <!-- 题目内容 -->
      <view class="question-content">
        <text class="content-text">{{ question.content }}</text>
        
        <!-- 如果有图片，显示图片 -->
        <view class="question-image" v-if="question.image_url">
          <image :src="question.image_url" mode="widthFix"></image>
        </view>
      </view>
      
      <!-- 选项列表 -->
      <view class="options-list">
        <view 
          v-for="(option, key) in question.options" 
          :key="key"
          class="option-item"
          :class="{
            'selected': question.userAnswer && question.userAnswer.includes(key),
            'correct': question.answer && question.answer.includes(key),
            'incorrect': question.userAnswer && question.userAnswer.includes(key) && !question.answer.includes(key)
          }"
        >
          <text class="option-key">{{ key }}</text>
          <text class="option-text">{{ option }}</text>
          
          <view class="option-icon">
            <text v-if="question.answer && question.answer.includes(key)" class="correct-icon">✓</text>
            <text v-else-if="question.userAnswer && question.userAnswer.includes(key)" class="incorrect-icon">✗</text>
          </view>
        </view>
      </view>
      
      <!-- 答案信息 -->
      <view class="answer-section">
        <view class="section-title">正确答案</view>
        <view class="answer-text">{{ question.answer }}</view>
        
        <view class="section-title">我的答案</view>
        <view class="answer-text" :class="{ 'incorrect-text': question.userAnswer !== question.answer }">
          {{ question.userAnswer || '未作答' }}
        </view>
        
        <view class="section-title">答案解析</view>
        <view class="explanation-text">{{ question.explanation || '暂无解析' }}</view>
      </view>
    </view>
    
    <!-- 底部操作栏 -->
    <view class="bottom-actions">
      <button class="action-btn prev" @click="goToPrevious" :disabled="!hasPrevious">上一题</button>
      <button class="action-btn bookmark" @click="toggleBookmark">
        <text v-if="isBookmarked">取消收藏</text>
        <text v-else>收藏题目</text>
      </button>
      <button class="action-btn next" @click="goToNext" :disabled="!hasNext">下一题</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      question: {},
      questionId: '',
      isBookmarked: false,
      currentIndex: 0,
      questionList: [],
      hasNext: false,
      hasPrevious: false
    }
  },
  onLoad(options) {
    this.questionId = options.id;
    
    // 从缓存加载题目信息
    this.loadQuestionDetails();
    
    // 设置导航栏标题
    uni.setNavigationBarTitle({
      title: '题目详情'
    });
  },
  methods: {
    loadQuestionDetails() {
      try {
        // 首先尝试从缓存加载当前题目
        const currentQuestion = uni.getStorageSync('currentQuestion');
        if (currentQuestion && currentQuestion.id == this.questionId) {
          this.question = currentQuestion;
        } else {
          // 如果没有当前题目缓存，尝试从错题列表中查找
          const wrongQuestions = uni.getStorageSync('wrongQuestions') || [];
          const foundQuestion = wrongQuestions.find(q => q.id == this.questionId);
          
          if (foundQuestion) {
            this.question = foundQuestion;
          } else {
            // 如果在错题列表中也没找到，显示错误提示
            uni.showToast({
              title: '题目不存在',
              icon: 'none'
            });
            setTimeout(() => {
              uni.navigateBack();
            }, 1500);
            return;
          }
        }
        
        // 检查题目是否已收藏
        this.checkBookmarkStatus();
        
        // 加载包含当前题目的列表，用于上一题/下一题导航
        this.loadQuestionList();
      } catch (e) {
        console.error('加载题目详情失败', e);
        uni.showToast({
          title: '加载题目失败',
          icon: 'none'
        });
      }
    },
    
    checkBookmarkStatus() {
      try {
        const bookmarkedQuestions = uni.getStorageSync('bookmarkedQuestions') || [];
        this.isBookmarked = bookmarkedQuestions.some(q => q.id == this.question.id);
      } catch (e) {
        console.error('检查收藏状态失败', e);
      }
    },
    
    loadQuestionList() {
      try {
        // 加载错题列表作为导航列表
        const wrongQuestions = uni.getStorageSync('wrongQuestions') || [];
        this.questionList = wrongQuestions;
        
        // 找到当前题目在列表中的索引
        this.currentIndex = this.questionList.findIndex(q => q.id == this.question.id);
        
        // 检查是否有上一题/下一题
        this.hasPrevious = this.currentIndex > 0;
        this.hasNext = this.currentIndex < this.questionList.length - 1 && this.currentIndex !== -1;
      } catch (e) {
        console.error('加载题目列表失败', e);
      }
    },
    
    goToPrevious() {
      if (!this.hasPrevious) return;
      
      const prevQuestion = this.questionList[this.currentIndex - 1];
      uni.setStorageSync('currentQuestion', prevQuestion);
      
      // 更新当前页面，不进行页面跳转
      this.questionId = prevQuestion.id;
      this.loadQuestionDetails();
    },
    
    goToNext() {
      if (!this.hasNext) return;
      
      const nextQuestion = this.questionList[this.currentIndex + 1];
      uni.setStorageSync('currentQuestion', nextQuestion);
      
      // 更新当前页面，不进行页面跳转
      this.questionId = nextQuestion.id;
      this.loadQuestionDetails();
    },
    
    toggleBookmark() {
      try {
        let bookmarkedQuestions = uni.getStorageSync('bookmarkedQuestions') || [];
        
        if (this.isBookmarked) {
          // 取消收藏
          bookmarkedQuestions = bookmarkedQuestions.filter(q => q.id != this.question.id);
          uni.showToast({
            title: '已取消收藏',
            icon: 'none'
          });
        } else {
          // 添加收藏
          if (!bookmarkedQuestions.some(q => q.id == this.question.id)) {
            bookmarkedQuestions.push(this.question);
          }
          uni.showToast({
            title: '已收藏',
            icon: 'success'
          });
        }
        
        // 更新存储和状态
        uni.setStorageSync('bookmarkedQuestions', bookmarkedQuestions);
        this.isBookmarked = !this.isBookmarked;
      } catch (e) {
        console.error('收藏操作失败', e);
        uni.showToast({
          title: '操作失败',
          icon: 'none'
        });
      }
    },
    
    formatQuestionType(type) {
      const typeMap = {
        'single': '单选题',
        'multiple': '多选题',
        'judge': '判断题',
        'fill': '填空题'
      };
      return typeMap[type] || type;
    },
    
    formatSubject(subject) {
      if (subject === 'k1') return '科目一';
      if (subject === 'k4') return '科目四';
      return subject;
    }
  }
}
</script>

<style lang="scss">
.detail-container {
  min-height: 100vh;
  background-color: #f8f8f8;
  padding: 20rpx;
  padding-bottom: 120rpx;
  display: flex;
  flex-direction: column;
}

.question-card {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.question-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
  
  .question-type {
    font-size: 28rpx;
    color: #fff;
    background-color: #1890ff;
    padding: 6rpx 20rpx;
    border-radius: 30rpx;
  }
  
  .question-meta {
    font-size: 26rpx;
    color: #999;
  }
}

.question-content {
  margin-bottom: 30rpx;
  
  .content-text {
    font-size: 34rpx;
    color: #333;
    line-height: 1.6;
    font-weight: 500;
  }
  
  .question-image {
    margin-top: 20rpx;
    
    image {
      width: 100%;
      border-radius: 8rpx;
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
    }
  }
}

.options-list {
  margin-bottom: 30rpx;
  
  .option-item {
    display: flex;
    padding: 24rpx;
    background-color: #f8f8f8;
    border-radius: 12rpx;
    margin-bottom: 16rpx;
    position: relative;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    &.selected {
      background-color: #e6f7ff;
      border: 2rpx solid #1890ff;
    }
    
    &.correct {
      background-color: #f6ffed;
      border: 2rpx solid #52c41a;
    }
    
    &.incorrect {
      background-color: #fff1f0;
      border: 2rpx solid #f5222d;
    }
    
    .option-key {
      width: 60rpx;
      height: 60rpx;
      line-height: 60rpx;
      text-align: center;
      background-color: #eee;
      color: #666;
      border-radius: 30rpx;
      font-size: 30rpx;
      margin-right: 20rpx;
      flex-shrink: 0;
    }
    
    .option-text {
      flex: 1;
      font-size: 30rpx;
      color: #333;
      line-height: 1.5;
    }
    
    .option-icon {
      margin-left: 20rpx;
      
      .correct-icon {
        color: #52c41a;
        font-weight: bold;
        font-size: 32rpx;
      }
      
      .incorrect-icon {
        color: #f5222d;
        font-weight: bold;
        font-size: 32rpx;
      }
    }
  }
}

.answer-section {
  padding: 30rpx;
  background-color: #f8f8f8;
  border-radius: 12rpx;
  
  .section-title {
    font-size: 30rpx;
    color: #333;
    font-weight: bold;
    margin-bottom: 16rpx;
    margin-top: 30rpx;
    
    &:first-child {
      margin-top: 0;
    }
  }
  
  .answer-text {
    font-size: 30rpx;
    color: #52c41a;
    font-weight: 500;
    margin-bottom: 20rpx;
    
    &.incorrect-text {
      color: #f5222d;
    }
  }
  
  .explanation-text {
    font-size: 30rpx;
    color: #666;
    line-height: 1.6;
  }
}

.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20rpx;
  background-color: #fff;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  display: flex;
  justify-content: space-between;
  
  .action-btn {
    width: 30%;
    height: 80rpx;
    line-height: 80rpx;
    border-radius: 40rpx;
    font-size: 28rpx;
    
    &.prev, &.next {
      background-color: #1890ff;
      color: #fff;
      
      &:disabled {
        background-color: #ccc;
        color: #fff;
      }
    }
    
    &.bookmark {
      background-color: #f0f0f0;
      color: #333;
    }
  }
}
</style> 